```html
<script setup>
  import * as clipboard from "@zag-js/clipboard"
  import { useMachine, normalizeProps } from "@zag-js/vue"
  import { ClipboardCheck, ClipboardCopyIcon } from "lucide-vue-next"
  import { computed } from "vue"

  const service = useMachine(clipboard.machine, {
    id: "1",
    value: "https://github.com/chakra-ui/zag",
  })

  const api = computed(() => clipboard.connect(service, normalizeProps))
</script>

<template>
  <div v-bind="api.getRootProps()">
    <label v-bind="api.getLabelProps()">Copy this link</label>
    <div v-bind="api.getControlProps()">
      <input v-bind="api.getInputProps()" style="width: 100%" />
      <button v-bind="api.getTriggerProps()">
        <ClipboardCheck v-if="api.copied" />
        <ClipboardCopyIcon v-else />
      </button>
    </div>
  </div>
</template>
```
